<template>
  <div class="block">
    <div class="main">
      <div class="areaname">
        <img src="/static/img/title2.png" alt="">
      </div>
      <div class="navbx" v-for="(i, index) in navl" :key="i.id" @click.stop="openlink(i)">
        <img :src="i.ico" alt="">
        <div class="nav-s">
          <span>{{ i.name }}</span>
        </div>
      </div>

      <div class="navbx">
        <img src="/static/img/红外相机背景.png" alt="">
        <div class="nav-s">
          <span style="color: #fff;opacity: .5;">红外相机</span>
        </div>
      </div>
      <div class="navbx">
        <img src="/static/img/生态评估背景.png" alt="">
        <div class="nav-s">
          <span style="color: #fff;opacity: .5;">生态评估</span>
        </div>
      </div>
      <div class="navbx">
        <img src="/static/img/感知大屏背景.png" alt="">
        <div class="nav-s">
          <span style="color: #fff;opacity: .5;">感知大屏</span>
        </div>
      </div>

    </div>
    <div class="quit-x">
      <img src="/static/img/head.png" alt="">
      <span style="margin: 0 8px;">雾灵山管理员</span>
      <img @click.stop="gohome" src="/static/img/quit.png" alt="">
    </div>
    <!-- <router-link class="sys-x" style="bottom: 120px;" to="/">
      <img src="/static/img/sys.png" alt="">
      <span>系统配置</span>
    </router-link> -->
    <div class="sys-x" style="bottom:120px;" @click.stop="isapp = true">
      <img src="/static/img/app.png" alt="">
      <span>APP下载</span>
    </div>

    <div class="appdwn" v-if="isapp">
      <div class="close" @click.stop="isapp = false">
        <img src="/static/img/close.png" alt="">
      </div>
      <img src="/static/img/erweima.png" alt="">
    </div>
  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'

export default {
  data() {
    return {
      token: "",
      navl: [
        {
          id: '001',
          name: "本底资源库",
          path: "/bdzy?token=",
          img:"/static/newimg/1.png",
          ico: "/static/img/本底资源背景.png"
        },
        {
          id: '002',
          name: "日常巡护",
          path: "/pmt?token=",
          ico: "/static/img/日常巡护背景.png"
        },
        {
          id: '003',
          name: "动物监测",
          path: "/nljk?token=",
          ico: "/static/img/动物监测背景.png"
        },
        {
          id: '004',
          name: "人类活动",
          path: "/human/index?token=",
          ico: "/static/img/人类活动背景.png"
        },
        {
          id: '005',
          name: "新闻公告",
          path: "/xwgg?token=",
          ico: "/static/img/新闻公告背景.png"
        },
        {
          id: '006',
          name: "用户管理",
          path: "/yhgl?token=",
          ico: "/static/img/用户管理背景.png"
        }
      ],
      isapp: false
    }
  },
  created() {
    
  },
  mounted() {

  },

  methods: {
    openlink(data) {
      let token = window.sessionStorage.getItem('token');
      window.open(data.path + token);
    },
    gohome() {
      window.sessionStorage.removeItem('token');
      this.$router.push('/');
    }
  }
}
</script>
<style scoped>
.block {
  width: 100%;
  height: 100%;
  background-image: url('../../static/img/bc2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.main {
  width: calc(100% - 200px);
  height: 500px;
  margin-top: 130px;
  display: flex;
  /* align-items: center; */
  justify-content: space-around;
  position: relative;
}

.main img {
  width: 100%;
  height: 100%;
}

.areaname {
  width: 100px;
  height: 450px;
  overflow: hidden;
}

.navbx {
  width: 115px;
  height: 380px;
  cursor: pointer;
  position: relative;
}

.nav-s {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'MyCustomFont';
  font-size: 0.36rem;
  color: #fff;
  text-shadow: 0px 4px 4px rgba(2, 9, 23, 0.80);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
}

.nav-s:hover {
  color: #387BFF;
}

.navbx:nth-child(odd) {
  margin-top: 60px;
}

.quit-x {
  width: 200px;
  height: 80px;
  background-image: url('../../static/img/quitbc.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #fff;
  font-size: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 350px;
  cursor: pointer;
}

.sys-x {
  width: 178px;
  height: 64px;
  background-image: url('../../static/img/sysbc.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: #fff;
  font-size: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  right: 0;
  cursor: pointer;
}

.appdwn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 9, 23, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.close {
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
  z-index: 10;
  cursor: pointer;
}
</style>
